<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "66409cfbd9f6d1c840813ae572b55b04",
    };
    AMapLoader.load({
        key: "18f5669239af3dd1946a7eb31d266623", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.HawkEye", "AMap.ToolBar", "AMap.ControlBar"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            var scale = new AMap.Scale({
                visible: false
            }),
                toolBar = new AMap.ToolBar({
                    visible: false,
                    position: {
                        top: '110px',
                        right: '40px'
                    }
                }),
                controlBar = new AMap.ControlBar({
                    visible: false,
                    position: {
                        top: '10px',
                        right: '10px'
                    }
                }),
                overView = new AMap.HawkEye({
                    visible: true
                }),
                map = new AMap.Map("container", {
                    zoom: 11
                });
            map.addControl(scale);
            map.addControl(toolBar);
            map.addControl(controlBar);
            map.addControl(overView);
            function toggleScale(checkbox) {
                if (checkbox.checked) {
                    scale.show();
                } else {
                    scale.hide();
                }
            }
            function toggleToolBar(checkbox) {
                if (checkbox.checked) {
                    showToolBar();
                } else {
                    hideToolBar();
                }
            }
            function toggleControlBar(checkbox) {
                if (checkbox.checked) {
                    document.getElementById('controlBar').checked = true;
                    controlBar.show();
                } else {
                    document.getElementById('controlBar').checked = false;
                    controlBar.hide();
                }
            }
            function toggleOverViewShow(checkbox) {
                if (checkbox.checked) {
                    overView.show();
                } else {
                    overView.hide();
                }
            }
            function showToolBar() {
                document.getElementById('toolbar').checked = true;
                toolBar.show();
            }
            function hideToolBar() {
                document.getElementById('toolbar').checked = false;
                toolBar.hide();
            }
        })
        .catch((e) => {
            console.log(e);
        });
});

onUnmounted(() => {
    map?.destroy();
});
</script>

<template>
    <div id="container"></div>
    <div class='input-card'>
        <div class="input-item">
            <input type="checkbox" onclick="toggleScale(this)" />比例尺
        </div>

        <div class="input-item">
            <input type="checkbox" id="toolbar" onclick="toggleToolBar(this)" />工具条
        </div>

        <div class="input-item">
            <input type="checkbox" id="controlBar" onclick="toggleControlBar(this)" />工具条方向盘
        </div>

        <div class="input-item">
            <input type="checkbox" id="overview" checked onclick="toggleOverViewShow(this)" />显示鹰眼
        </div>
    </div>
</template>

<style scoped>
html,
body {
    height: 800px;
}

#container {
    height: 800px;
}

.input-card {
    width: 150px;
    top: 10px;
    left: 10px;
    bottom: auto;
}
</style>
